<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM节点删除之detach()的基本用法</title>
    <script src="../jquery-3.4.1.js"></script>
    <style>
        div {
            background: #bbffaa;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击加入 p 元素</button>
</body>
<script>
    $('p').click(function (e) {
        alert(e.target.innerHTML)
    });
    var p;
    $("#bt1").click(function () {
        if(!$("p").length) return;
        p = $("p").detach()
    });
    $("#bt2").click(function () {
        $("body").prepend(p)
    });
    /**
     * 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
     * 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
     $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。
     当你append之后，又重新回到了文档流中。就又显示出来了。
    * */
</script>
</html>